<template>
  <div class="home">
    <BottomArrow :type="1"/>
    <div class="video-wrapper">
      <div class="video"><video controls src="http://192.168.88.7:9898/zhixun.mp4"></video></div>
    </div>
    <div class="introduce-wrapper">
      <h1 class="zhixun" style="margin-bottom: 20px;">智询</h1>
      <h3 class="introduce-subtitle"><span>专注于汽车后市场领域的</span> 智能云询问产品
        <div class="point-wrapper">
          <img :src="require('../assets/imgs/home-point.png')" alt="">
        </div>
      </h3>

      <h5 class="introduce-context">
        帮助企业收集、组织数据并进行分析，将AI技术注入企业的管理和生产中<br/>
        通过数据管理、业务分析和AI，输出更优秀的解决方案，让科技与服务相辅相成<br/>
        最终优化企业产能结构，将汽车后市场中的服务价值最大化
      </h5>
    </div>
    <div class="type-wrapper">
      <div class="bg1"></div>
      <div class="bg2"></div>
      <p class="type-title">
        I n t e l l i g e n c e <span>|</span> P r e c i s i o n <span>|</span> D e c i s i o n
      </p>
    </div>
    <div class="vqa-wrapper">
      <div class="vqa">
        <h2>It's Time To Start V-QA!</h2>
        <h5 class="vqa-subtitle">
          <span v-for="(item, i) in ['全', '面','升','级','汽','车','行','业','的','服','务','管','理']"
          :key="i">{{item}}</span>
        </h5>
        <h1 class="zhixun" style="margin-top: 30px; font-size: 30px;">智询</h1>
      </div>
    </div>
    <div class="advantage-wrapper">
      <div class="advantage-title">
        <TypeButton :title="'产品优势'"/>
      </div>
      <div class="advantage-list">
        <AdvantageItem v-for="item in advantages"
                       :title="item.title"
                       :sub-title="item.subTitle"
                       :url="item.url"
                       :key="item.title"/>
      </div>
    </div>
    <div class="scence-wrapper">
      <div class="scence-title">
        <TypeButton :title="'应用场景'"/>
      </div>
      <div class="scence-list">
        <div class="scence-list-row">
          <ScenceItem v-for="item in scences1"
                      :key="item.name"
                      :type="item.type"
                      :name="item.name"
                      :title="item.title"
                      :url-default="item.urlDefault"
                      :url-hover="item.urlHover"
                      :sub-title="item.subTitle"
                      @item-event="scenceItemEvent(item.path)"/>
        </div>
        <div class="scence-list-row">
          <ScenceItem v-for="item in scences2"
                      :key="item.name"
                      :type="item.type"
                      :name="item.name"
                      :title="item.title"
                      :url-default="item.urlDefault"
                      :url-hover="item.urlHover"
                      :sub-title="item.subTitle"
                      @item-event="scenceItemEvent(item.path)"/>
        </div>
      </div>
    </div>

    <div class="upgrade-wrapper">
      <div class="upgrade-col-l">
        <div class="upgrade-card">
          <img class="upgrade_bg" :src="require('../assets/imgs/upgrade_bg.png')" alt="">
          <img class="upgrade_p" :src="require('../assets/imgs/upgrade_p.png')" alt="">
          <div class="upgrade-card-t">
            <h1>V-QA</h1>
            <h5 style="text-align: left;">Intelligent ecological system of vehicle after-market</h5>
          </div>
          <div class="upgrade-card-b">
            <h3>汽车售后智能 生态协同平台</h3>
          </div>
        </div>
        <div class="upgrade-item-wrapper-m" style="margin-top: 15px;">
          <UpgradeItem class="UpgradeItem-order-b" :title="'C端业务'"
                       :items="['便利售后','汽车金融', '车生活', '品牌传播']"
                       :border-color="'#D8DF20'"
                       :url="require('../assets/imgs/cdyw.png')"/>
        </div>

      </div>
      <div class="upgrade-col-r upgrade-item-wrapper-m UpgradeItem-order-t" style="padding-top: 160px;margin-left: 15px;">
        <UpgradeItem :title="'基础支撑'" :border-color="'#FE6B17'" :items="['组织','数据', '沟通']" :url="require('../assets/imgs/jczc.png')"/>
        <div class="upgrade-item-container">
          <UpgradeItem :title="'B端业务'" :border-color="'#02D0FF'" :items="['智能询问','连接系统', '智能协同', '共享']" :url="require('../assets/imgs/bdyw.png')"/>

          <div class="upgrade-flg">
            <h3><span>UP</span>GRADE</h3>
            <h6>SERVICE VALUE</h6>
          </div>
        </div>
      </div>
    </div>

    <div class="about-wrapper">
      <div class="about-logo">
        <img :src="require('../assets/imgs/company.png')" alt="">
      </div>
      <div class="about-context">
        <div class="about-txt">
          <h3 class="about-title">关于我们|文思海辉</h3>
          <p class="about-who">
            <span>我们是谁</span><br/>
            <span>文思海辉是一家来自中国的全球IT服务企业，</span><br/>
            <span>为全球客户提供专业的数字化咨询、体验交互、技术实现与运营服务</span><br/>
            <span>致力于成为全球企业“最具价值的业务合作伙伴”</span>
          </p>

          <p class="about-hope">
            <span>我们的愿景</span><br/>
            <span>成就更美好的数字化新世界</span>
          </p>
          <p class="about-duty">
            <span>我们的使命</span><br/>
            <span>以数字科技领先全球，用行业服务创造价值</span>
          </p>
        </div>
      </div>
    </div>
    <FooterView/>
  </div>
</template>

<script>
  import BottomArrow from '../components/BottomArrow';
  import TypeButton from '../components/TypeButton';
  import AdvantageItem from '../components/AdvantageItem';
  import ScenceItem from '../components/ScenceItem';
  import UpgradeItem from '../components/UpgradeItem';
  import FooterView from '../components/FooterView';

  export default {
    name: 'Home',
    data() {
      return {
        advantages: [
          {
            title: '服务普惠性高',
            subTitle: '可接入渠道多样化-PC端、APP端',
            url: require('../assets/imgs/hp.png')
          },
          {
            title: '智能化领先水平',
            subTitle: '持续自动深度学习',
            url: require('../assets/imgs/zn.png')
          },
          {
            title: '定制化程度高',
            subTitle: '企业指定化数据采集渠道生成独立的分析模型',
            url: require('../assets/imgs/dz.png')
          },
          {
            title: '自助化程度高',
            subTitle: '可以自助解决95%以上问题',
            url: require('../assets/imgs/zz.png')
          }
        ],
        scences1: [
          {
            name: '智能服务',
            title: '智能客户解决方案',
            subTitle: '<span>共塑服务价值</span> <span>智创“新客服”</span>',
            type: 0,
            urlDefault: require('../assets/imgs/home/znfw.png'),
            urlHover: require('../assets/imgs/home/znfw_h.png'),
            path: '/Service'
          },
          {
            name: '智能运维',
            title: '智能运维解决方案',
            subTitle: '<span>IT运维现代化</span> <span>深化运维分析技能</span>',
            type: 0,
            urlDefault: require('../assets/imgs/home/znyw.png'),
            urlHover: require('../assets/imgs/home/znyw_h.png'),
            path: '/SmartOperation'
          }
        ],
        scences2: [
          {
            name: '企业智能化',
            title: '企业智能化解决方案',
            subTitle: '<span>助力企业智能化</span> <span>实现“人机协调”的管理体系</span>',
            type: 1,
            urlDefault: require('../assets/imgs/home/qyznh.png'),
            urlHover: require('../assets/imgs/home/qyznh_h.png'),
            path: '/Enterprise'
          },
          {
            name: '智能汽车',
            title: '智能汽车解决方案',
            subTitle: '<span>智能语音交互</span> <span>深度整合行业上下游</span>',
            type: 1,
            urlDefault: require('../assets/imgs/home/znqc.png'),
            urlHover: require('../assets/imgs/home/znqc_h.png'),
            path: '/Vehicle'
          }
        ]
      };
    },
    components: {
      BottomArrow,
      TypeButton,
      AdvantageItem,
      ScenceItem,
      UpgradeItem,
      FooterView
    },
    methods: {
      scenceItemEvent(path) {
        const xhr = new XMLHttpRequest();
        xhr.open('get', '/sendMessage?type=welcome');
        xhr.send();
        this.$router.push(path);
      }
    }
  };
</script>
<style lang="less">
  .home {
    position: relative;
    background-color: #301C7F;

    .video-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 170px 0;
      background-image: url("../assets/imgs/home/video_bg.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;

      .video {
        width: 700px;
        height: 400px;
        border: 2px solid #FF6C16;
        border-radius: 15px;
        background-color: #4C4CEA;
        overflow: hidden;

        video {
          width: 100%;
          height: 100%;
        }
      }
    }

    .zhixun {
      color: #FE6C17;
      font-size: 40px;
    }

    .introduce-wrapper {
      margin-bottom: 100px;
      .introduce-subtitle {
        margin-bottom: 100px;
        span {
          font-weight: normal;
        }
      }

      .introduce-context {
        line-height: 2;
      }

      .point-wrapper {
        position: relative;
        width: 100%;
        top: 50px;
        img {
          width: 200px;
          height: 10px;
        }
      }
    }

    .type-wrapper {
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .type-title {
        span {
          margin: 0 20px;
        }
      }
      .bg1, .bg2 {
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .bg1 {
        top: -160px;
        background-size: contain;
        background-image: url("../assets/imgs/bg1.png");
      }
      .bg2 {
        top: 0;
        background-size: cover;
        background-image: url("../assets/imgs/bg2.png");
      }
    }

    .vqa-wrapper {
      height: 500px;
      position: relative;
      background-image: url("../assets/imgs/home/vqa_bg.png");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin: 100px 0;
      .vqa {
        position: absolute;
        right: 300px;
        top: 100px;
        text-align: right;

        h2 {
          font-size: 30px;
        }

        .vqa-subtitle {
          display: inline-block;
          padding: 5px 12px;
          border: 1px solid #FE6C17;
          margin-top: 20px;
          font-weight: normal;
          span {
            margin: 0 5px;
          }
        }
      }
    }
    .advantage-wrapper {
      margin-bottom: 100px;
    }
    .advantage-wrapper,
    .scence-wrapper {
      display: flex;
      justify-content: center;
    }
    .advantage-title,
    .scence-title {
      flex: 1;
      display: flex;
      justify-content: center;
      padding-top: 10px;
    }
    .advantage-list,
    .scence-list {
      flex: 1.3;
      display: flex;
      flex-direction: column;
      align-items: start;

      .scence-list-row {
        display: flex;
      }
    }
    .upgrade-wrapper {
      position: relative;
      display: flex;
      padding-top: 100px;
      padding-bottom: 200px;

      .upgrade-col-l {
        flex: 1.6;
        align-items: flex-end;
      }

      .upgrade-col-r {
        flex: 1;
        align-items: start;
      }
      .upgrade-col-l,
      .upgrade-col-r {
        display: flex;
        flex-direction: column;
      }
      .upgrade-flg {
        position: absolute;
        top: calc(100% + 50px);
        right: 0;
        span {
          color: #FE6C17;
        }
      }
    }

    .upgrade-item-container {
      margin-top: 15px;
      position: relative;
    }

    .upgrade-card {
      width: 400px;
      height: 300px;
      position: relative;

      img.upgrade_p {
        position: absolute;
        bottom: -105px;
        left: -70px;
        width: 150px;
      }
      img.upgrade_bg {
        position: absolute;
        top: calc(100% + 70px);
        right: 100px;
      }
      .upgrade-card-t {
        background-color: #4960FC;
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }

      .upgrade-card-b {
        background-color: #ffffff;
        height: 50%;
        padding-top: 25px;
        border-top: 4px solid #FE6C17;
        border-bottom-right-radius: 15px;
        h3 {
          color: #485FFB;
        }
      }

      .upgrade-card-t,
      .upgrade-card-b {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    .about-wrapper {
      display: flex;
      padding: 100px 0;
      .about-logo {
        flex: 0.8;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 120px;
          height: 40px;
        }
      }

      .about-context {
        flex: 1;
        text-align: left;

        .about-txt {
          width: 500px;

          .about-title {
            color: #FE6C17;
            position: relative;
            padding-bottom: 30px;
            &::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              height: 2px;
              background-color: #FE6C17;
            }
          }

          .about-who, .about-hope, .about-duty {
            position: relative;
            padding-top: 30px;
            padding-bottom: 30px;
            span:first-child {
              font-weight: bold;
            }

            span:not(:first-child) {
              margin-top: 5px;
              display: inline-block;
              font-size: 14px;
            }

            &::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              height: 2px;
              background-color: #ffffff;
            }
          }

          .about-duty {
            &::after {
              background-color: #FE6C17;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .home {
      position: relative;
      background-color: #301C7F;

      .video-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 10px;
        background-image: url("../assets/imgs/home/video_bg.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;

        .video {
          width: 100%;
          height: 250px;
          border: 2px solid #FF6C16;
          border-radius: 15px;
          background-color: #4C4CEA;
          overflow: hidden;
        }
      }

      .zhixun {
        color: #FE6C17;
        font-size: 40px;
      }

      .introduce-wrapper {
        margin-bottom: 50px;
        padding: 0 10px;
        .introduce-subtitle {
          font-size: 16px;
          margin-bottom: 60px;
          span {
            font-weight: normal;
          }
        }

        .introduce-context {
          line-height: 2;
          text-align: left;
        }

        .point-wrapper {
          position: relative;
          width: 100%;
          top: 30px;
          img {
            width: 200px;
            height: 10px;
          }
        }
      }

      .type-wrapper {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .type-title {
          span {
            margin: 0 0;
          }
        }
        .bg1, .bg2 {
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
        }
        .bg1 {
          top: -160px;
          background-size: contain;
          background-image: url("../assets/imgs/bg1.png");
        }
        .bg2 {
          top: 0;
          background-size: cover;
          background-image: url("../assets/imgs/bg2.png");
        }
      }

      .vqa-wrapper {
        height: 350px;
        position: relative;
        background-image: url("../assets/imgs/home/vqa_bg.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 0;
        .vqa {
          position: absolute;
          right: 20px;
          top: 50px;
          text-align: right;

          h2 {
            font-size: 30px;
          }

          .vqa-subtitle {
            display: inline-block;
            padding: 5px 12px;
            border: 1px solid #FE6C17;
            margin-top: 20px;
            font-weight: normal;
            span {
              margin: 0 5px;
            }
          }
        }
      }
      .advantage-wrapper {
        margin-bottom: 50px;
        padding: 0 50px;
      }
      .advantage-wrapper,
      .scence-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .scence-title {
        margin-bottom: 10px;
      }
      .advantage-title,
      .scence-title {
        flex: 1;
        display: flex;
        justify-content: center;
        padding-top: 10px;
      }
      .advantage-list {
        align-items: start;
      }
      .scence-list {
        align-items: center;
      }
      .advantage-list,
      .scence-list {
        flex: 1.3;
        display: flex;
        flex-direction: column;

        .scence-list-row {
          display: flex;
          align-items: center;
        }
      }
      .upgrade-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        padding-top: 50px;
        padding-bottom: 50px;

        .upgrade-col-l {
          flex: 1.6;
          align-items: flex-end;
        }

        .upgrade-col-r {
          flex: 1;
          padding-top: 20px!important;
        }

        .upgrade-col-l,
        .upgrade-col-r {
          display: flex;
          align-items: flex-end;
          flex-direction: column;
        }
        .upgrade-flg {
          position: absolute;
          top: unset;
          right: unset;
          bottom: -155px;
          left: 50px;
          span {
            color: #FE6C17;
          }
        }
      }

      .upgrade-item-container {
        margin-top: 15px;
        position: unset;
      }

      .upgrade-card {
        align-self: center;
        width: 90%;
        height: 220px;
        position: relative;

        img.upgrade_p {
          position: absolute;
          bottom: -155px;
          left: -15px;
          width: 150px;
        }
        img.upgrade_bg {
          position: absolute;
          top: calc(100% + 175px);
          right: 120px;
          width: 260px;
        }
        .upgrade-card-t {
          background-color: #4960FC;
          height: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          border-top-left-radius: 15px;
          border-top-right-radius: 15px;
        }

        .upgrade-card-b {
          background-color: #ffffff;
          height: 50%;
          padding-top: 25px;
          border-top: 4px solid #FE6C17;
          border-bottom-right-radius: 15px;
          h3 {
            color: #485FFB;
          }
        }

        .upgrade-card-t,
        .upgrade-card-b {
          padding-left: 20px;
          padding-right: 20px;
        }
      }
      .upgrade-item-wrapper-m {
        padding-right: 20px;
      }

      .UpgradeItem-order-b {
        position: relative;
        top: 315px;
        right: 0;
      }
      .UpgradeItem-order-t {
        position: relative;
        top: -155px;
        right: 0;
      }
      .about-wrapper {
        display: flex;
        flex-direction: column;
        padding: 50px 0;
        .about-logo {
          flex: 0.8;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 120px;
            height: 40px;
          }
        }

        .about-context {
          flex: 1;
          text-align: left;

          .about-txt {
            width: unset;
            padding: 20px;
            .about-title {
              color: #FE6C17;
              position: relative;
              padding-bottom: 30px;
              &::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #FE6C17;
              }
            }

            .about-who, .about-hope, .about-duty {
              position: relative;
              padding-top: 30px;
              padding-bottom: 30px;
              span:first-child {
                font-weight: bold;
              }

              span:not(:first-child) {
                margin-top: 5px;
                display: inline-block;
                font-size: 14px;
              }

              &::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #ffffff;
              }
            }

            .about-duty {
              &::after {
                background-color: #FE6C17;
              }
            }
          }
        }
      }
    }
  }
</style>
